<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>releaseDetail</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
	<style>
  html,
  body {
      background-color: rgba(255, 255, 255, 0);
  }
  .slides-enter-active,
  .slides-leave-active {
      transition: opacity .2s;
  }

  .slides-enter,
  .slides-leave-to {
      opacity: 0;
  }

  .slidesBottom-enter-active {
      transition: all .3s ease;
  }

  .slidesBottom-leave-active {
      transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }

  .slidesBottom-enter,
  .slidesBottom-leave-to {
      transform: translateY(800px);
  }
.actionSheet-mask {
    width: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 10;
    background: rgba(0, 0, 0, 0.3);
}
.actionSheetInput {
      width: 100%;
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 20;
      background: #fff;
      border-radius: 15px 15px 0 0!important;
}
.moneyInput{
  height: 51px!important;
  line-height: 28px!important;
  width: 326px!important;
  border-radius: 3px!important;
  box-shadow: 0px 0px 14px #EFEFEF!important;
      margin: 0 auto 28px!important;
  text-align: center;
}
/*适配屏幕320px*/
@media (max-width: 320px) {
    .moneyInput{
        width: 217px;
        height: 34px;
    }
}
/*适配屏幕320px*/
</style>
</head>
<body>
  <div id="releaseDetail" v-bind:style="{height:wHeight}">
      <!--弹出输入金额 -->
      <transition name="slides">
          <div class="actionSheet-mask" id="" v-bind:style="{height:wHeight}" v-if="showMask1" @click.self="">
          </div>
      </transition>
      <transition name="slidesBottom">
          <div class="actionSheetInput" v-if="showMask2">
              <div class="aui-tab"  style="background-color:rgba(255, 255, 255, 0);">
                  <div class="aui-tab-item"></div>
                  <div class="aui-tab-item">申退金额</div>
                  <div class="aui-tab-item"></div>
              </div>
              <p><input type="number" ref="moneyInputVal" class="moneyInput" placeholder="退款金额(¥)"></p>
          </div>
      </transition>
      <!-- 弹出输入金额 -->
  </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/fastclick.js"></script>
<script type="text/javascript">
    apiready = function(){
        api.parseTapmode();
    };
    ////初始化页面
    var app = new Vue({
        el: '#releaseDetail',
        data: {
            wHeight: '',
            showMask1 : true,
            showMask2 : false
        },
        methods: {
            init: function() {
              /////初始化页面高度
                var wh = document.documentElement.clientHeight || document.body.clientHeight;
                this.wHeight = (wh-20) + 'px';
            },
            askReturn : function(){
               pageMathed.ask();
            }
        },
        mounted:function(){
          this.showMask2 = !this.showMask2;
            this.init();
        }
    });
    var pageMathed = {
        ask : function(){
          var UIActionSelector = api.require('UIActionSelector');
              UIActionSelector.open({
                  datas :'widget://res/reson.json',
                  iPhoneXBottomHeight : '34',
                  layout : {
                      row: 7,                            //（可选项）数字类型；每屏显示的数据行数，超出的数据可以滑动查看，只能是奇数；默认：5
                      col: 1,                            //（可选项）数字类型；数据源的数据级数，最多3级；默认：3
                      height: 30,                        //（可选项）数字类型；每行选项的高度；默认：30
                      size: 17,                          //（可选项）数字类型；普通选项的字体大小；默认：12
                      sizeActive: 20,                    //（可选项）数字类型；当前选项的字体大小；默认：同 size
                      rowSpacing: 5,                     //（可选项）数字类型；行与行之间的距离；默认：5
                      colSpacing: 10,                    //（可选项）数字类型；列与列之间的距离；默认：10
                      maskBg: 'rgba(0,0,0,0.2)',         //（可选项）字符串类型；遮罩层背景，点击该区域隐藏选择器，支持 rgb，rgba，#，img；默认：rgba(0,0,0,0.2)
                      bg: '#fff',                        //（可选项）字符串类型；选择器有效区域背景，支持 rgb，rgba，#，img；默认：#fff
                      color: '#969696',                     //（可选项）字符串类型；选项的文字颜色，支持 rgb，rgba，#；默认：#848484
                      colorSelected: '#007AFF'              //（可选项）字符串类型；已选项的文字颜色，支持 rgb，rgba，#；默认：同 colorActive
                  },
                  ok: {
                      text: '确定',
                      size: 17,
                      w: 90,
                      h: 35,
                      bg: '#fff',
                      bgActive: '#fff',
                      color: '#969696',
                      colorActive: '#fff'
                  },
                  cancel :{                                      //（可选项）JSON 对象类型；取消按钮设置
                      text: '取消',                      //（可选项）字符串类型；取消按钮的显示文字；默认：未设置时只显示背景
                      size: 17,                          //（可选项）数字类型；取消按钮的显示文字大小；默认：12
                      w: 90,                             //（可选项）数字类型；取消按钮的宽；默认：90
                      h: 35,                             //（可选项）数字类型；取消按钮的高；默认：35
                      bg: '#fff',                        //（可选项）字符串类型；取消按钮的背景，支持 rgb，rgba，#，img；默认：'#fff'
                      bgActive: '#fff',                  //（可选项）字符串类型；取消按钮的背景高亮，支持 rgb，rgba，#，img；默认：同 bg
                      color: '#969696',                     //（可选项）字符串类型；取消按钮的文字颜色，支持 rgb，rgba，#；默认：'#848484'
                      colorActive: '#fff'                //（可选项）字符串类型；取消按钮的文字颜色高亮，支持 rgb，rgba，#；默认：同 color
                  },
                  title : {                                      //（可选项）JSON 对象类型；选择器顶部标题栏设置
                      text: '申请退款',                    //（可选项）字符串类型；选择器的标题内容；默认：请选择
                      size: 18,                          //（可选项）数字类型；标题内容的文字大小；默认：12
                      h: 44,                             //（可选项）数字类型；标题栏的高；默认：44
                      bg: '#fff',                        //（可选项）字符串类型；标题栏的背景，支持 rgb，rgba，#，img；默认：'#eee'
                      color: '#000'  ,                    //（可选项）字符串类型；标题内容的文字颜色，支持 rgb，rgba，#；默认：'#848484'
                      alignment:'center'                 // (可选项)字符串类型；标题内容的文字的对齐方式，默认：'center'
                  },
                  lineColor : 'rgba(0,0,0,0)',
                  actives : [],
                },  function(ret, err) {
                     if (ret) {
                        //console.log(JSON.stringify(ret));
                     } else {
                         //console.log(JSON.stringify(err));
                     }
          })
        }
    }

</script>
</html>
